<template>
  <!-- 日期选择器 -->
  <uni-datetime-picker
    ref="datePickerRef"
    v-model="dateRange"
    type="daterange"
    @change="onDateRangeChange"
  >
    <slot />
  </uni-datetime-picker>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 定义事件
const emit = defineEmits(['confirm'])

// 日期选择相关状态
const dateRange = ref<string[]>([])
const datePickerRef = ref()

// 打开日期选择器
const openDatePicker = (timeRange: [string, string] | null) => {
  // console.log('openDatePicker', timeRange)
  if (timeRange && timeRange.length === 2) {
    dateRange.value = [timeRange[0], timeRange[1]]
  } else {
    // 设置默认值为空数组，让用户选择
    dateRange.value = []
  }
}

// 日期范围变化
const onDateRangeChange = (dateRange: string[]) => {
  // 当用户选择完日期范围后，直接触发确认事件
  if (dateRange && dateRange.length === 2) {
    emit('confirm', [dateRange[0], dateRange[1]])
  }
}

// 导出方法供父组件调用
defineExpose({
  openDatePicker
})
</script>
